<template>
    <div class="navbar">
      <router-link to="/create-profile">创建宠物档案</router-link>
      <router-link to="/view-profile">查看宠物档案</router-link>
      <router-link to="/chat">宠物聊天</router-link>
      <router-link to="/diary">宠物日记</router-link>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Navbar'
  }
  </script>
  
  <style scoped>
  .navbar {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #f2f2f2;
  }
  
  .navbar a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .navbar a:hover {
    background-color: #ddd;
  }
  </style>
  